<template>
  <div :class="{'card card21':!isLine,'card card22':isLine}">
    <h2><span /></h2>
    <div ref="box" class="border-box">
      <dv-scroll-board class="dv-scr-board" :config="config" />
    </div>
  </div>
</template>

<script>
import Bus from '@/common/bus'
export default {
  components: {},
  data() {
    return {
      isLine:false,
      basicH: 40,
      config: {}
    }
  },
  mounted() {
    const that = this
    Bus.$on('nodeInfo', nodeInfo => {
      this.isLine=false
      const H = that.$refs.box.offsetHeight - 40
      let rows = Math.ceil((H - that.basicH * 2) / that.basicH)
      rows = rows <= 0 ? 1 : rows
      const nodePowers = nodeInfo.nodePowers
      const data = []
      for (var i = 0; i < nodePowers.length; i++) {
        const temp = nodePowers[i]
        const tmp = []
        tmp[0] = temp.i
        tmp[1] = temp.inOrOut == 1 ? '输入' : '输出'
        tmp[2] = "<span class='colorGrass'>" + temp.power + '</span>'
        data[i] = tmp
      }
      that.config = {
        header: ['节点编号', '输入输出', '功率(W)'],
        data,
        rowNum: rows, // 表格行数
        headerHeight: that.basicH,
        headerBGC: 'rgba(15, 22, 64, .1)', // 表头
        oddRowBGC: 'rgba(15, 22, 64, .1)', // 奇数行
        evenRowBGC: 'rgba(15, 22, 64, .1)', // 偶数行
        index: false,
        columnWidth: [150],
        align: ['center', 'center', 'center']
      }
    })
    Bus.$on('lineInfo', lineInfo => {
      this.isLine=true
      const H = that.$refs.box.offsetHeight - 40
      let rows = Math.ceil((H - that.basicH * 2) / that.basicH)
      rows = rows <= 0 ? 1 : rows
      const lineWastage = lineInfo.lineWastage
      const data = []
      for (var i = 0; i < lineWastage.length; i++) {
        const temp = lineWastage[i]
        const tmp = []
        tmp[0] = temp.from
        tmp[1] = temp.to
        tmp[2] = "<span class='colorGrass'>" + temp.wastage + '</span>'
        data[i] = tmp
      }
      that.config = {
        header: ['From', 'To', '损耗碳流'],
        data,
        rowNum: rows, // 表格行数
        headerHeight: that.basicH,
        headerBGC: 'rgba(15, 22, 64, .1)', // 表头
        oddRowBGC: 'rgba(15, 22, 64, .1)', // 奇数行
        evenRowBGC: 'rgba(15, 22, 64, .1)', // 偶数行
        index: false,
        columnWidth: [150],
        align: ['center', 'center', 'center']
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.border-box {
  margin: 20px 0 10px;
  border-radius: 10px;
  padding: 0 10px 0;
  box-sizing: border-box;
  height: calc(100% - 60px) !important;
  .dv-scr-board {
    width: 100%;
    height: calc(100% - 20px);
  }
}
</style>
